<template>
	<div :class="curClassName" :style="curStyle">
		<div
			v-if="containerModel.NORTH"
			:style="containerModel.NORTH.style"
			class="no-style overflow-auto app-scroll-container__header"
		>
			<div
				v-for="name of containerModel.NORTH.name"
				class="container-item__pos"
				:key="name"
			>
				<slot :name="name"></slot>
			</div>
		</div>
		<div class="app-scroll-container__middle" :style="middleContainerStyle">
			<div
				v-if="containerModel.WEST"
				:style="containerModel.WEST.style"
				class="no-style overflow-auto app-scroll-container__left"
			>
				<div
					v-for="name of containerModel.WEST.name"
					class="container-item__pos"
					:style="getItemPosStyle(name)"
					:key="name"
				>
					<slot :name="name"></slot>
				</div>
			</div>
			<div
				v-if="containerModel.CENTER"
				:style="containerModel.CENTER.style"
				class="no-style overflow-auto app-scroll-container__center"
			>
				<div
					v-for="name of containerModel.CENTER.name"
					class="container-item__pos"
					:style="getItemPosStyle(name)"
					:key="name"
				>
					<slot :name="name"></slot>
				</div>
			</div>
			<div
				v-if="containerModel.EAST"
				:style="containerModel.EAST.style"
				class="no-style overflow-auto app-scroll-container__right"
			>
				<div
					v-for="name of containerModel.EAST.name"
					class="container-item__pos"
					:style="getItemPosStyle(name)"
					:key="name"
				>
					<slot :name="name"></slot>
				</div>
			</div>
		</div>
		<div
			v-if="containerModel.SOUTH"
			:style="containerModel.SOUTH.style"
			class="no-style overflow-auto app-scroll-container__bottom"
		>
			<div
				v-for="name of containerModel.SOUTH.name"
				class="container-item__pos"
				:key="name"
			>
				<slot :name="name"></slot>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { getBoxSize } from '@/core/utils/util';
import { Ref } from 'vue';
import { scrollContainerProps } from './scroll-container';

const props = defineProps(scrollContainerProps);

/**
 * 插槽对象
 *
 * @memberof AppScrollContainer
 */
const containerModel = computed(() => {
	let containerModel: IParam = {};
	let minusHeight = '';
	let minusWidth = '';
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.details &&
		curLayoutModel.details.length > 0
	) {
		curLayoutModel.details.forEach((key: string) => {
			let childModelDetail: any;
			if (props.index || props.index === 0) {
				childModelDetail = props.layoutModelDetails[`${key}_${props.index}`];
			} else {
				childModelDetail = props.layoutModelDetails[key];
			}
			if (childModelDetail) {
				const {
					name,
					layoutWidth,
					widthMode,
					layoutHeight,
					heightMode,
					layoutPos,
				} = childModelDetail;
				const style = {};
				if (layoutWidth) {
					if (
						layoutPos &&
						(Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))
					) {
						Object.assign(style, {
							width: getBoxSize('WIDTH', widthMode, layoutWidth).width,
						});
						minusWidth += ` - ${
							getBoxSize('WIDTH', widthMode, layoutWidth).width
						}`;
					}
				}
				if (layoutHeight) {
					if (
						layoutPos &&
						(Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))
					) {
						Object.assign(style, {
							height: getBoxSize('HEIGHT', heightMode, layoutHeight).height,
						});
						minusHeight += ` - ${
							getBoxSize('HEIGHT', heightMode, layoutHeight).height
						}`;
					}
				}
				if (containerModel.hasOwnProperty(layoutPos)) {
					Object.assign(containerModel[layoutPos], { style });
					containerModel[layoutPos].name.push(name);
				} else {
					containerModel[layoutPos] = { style, name: [name] };
				}
			}
		});
	}
	middleContainerStyle.value.height = minusHeight
		? `calc(100%${minusHeight})`
		: '100%';
	if (containerModel.CENTER) {
		containerModel.CENTER.style.width = minusWidth
			? `calc(100%${minusWidth})`
			: '100%';
	}
	return containerModel;
});

/**
 * 中间区域样式
 *
 * @memberof AppScrollContainer
 */
const middleContainerStyle: Ref<any> = ref({});

/**
 * 项名称
 *
 * @memberof AppScrollContainer
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式类
 *
 * @memberof AppScrollContainer
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-scroll-container ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppScrollContainer
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 *  获取项布局样式
 */
const getItemPosStyle = (name: string) => {
	const itemName =
		props.index || props.index === 0 ? `${name}_${props.index}` : name;
	let layoutModel = props.layoutModelDetails[itemName];
	if (layoutModel) {
		const childBoxSizeStyle: any = layoutModel.getBoxSizeStyle();
		const boxSizeStyle: any = {};
		if (!childBoxSizeStyle.width) {
			Object.assign(boxSizeStyle, { width: '100%' });
		}
		if (!childBoxSizeStyle.height) {
			Object.assign(boxSizeStyle, { height: '100%' });
		} else {
			Object.assign(boxSizeStyle, { display: 'contents' });
		}
		if (!layoutModel.visible) {
			Object.assign(boxSizeStyle, { display: 'none' });
		}
		return boxSizeStyle;
	}
};
</script>
